<template>
    <div class="sendinfor">
        <input v-model="infor" />
        <button @click="sendinfor" :disabled="yornsend">发送</button>
    </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';

export default {
  name: 'Sendinfor',
  setup() {
    const infor = ref('');
    // 控制发送按钮能否发送消息
    const yornsend = computed(() => {
      if (infor.value) {
        return false;
      }
      return true;
    });
    const Store = useStore();

    // 得到需要发送的好友的callcode
    const sendeecallcode = Store.state.basicinfor.iscallcode;
    // 得到自己的callcode
    const sendercallcode = Store.state.basicinfor.userinfor.callcode;
    // 得到自己的callcode
    const sendername = Store.state.basicinfor.userinfor.name; 
    // 发送消息
    function sendinfor() {
      // 向服务发送消息，参数二表明发送给谁
      Store.state.basicinfor.socket.emit('sendinfor', sendeecallcode, sendercallcode, infor.value);
      // 生成消息对象   这可以改成构造函数，暂时不改
      const inforobj = {
        sender: sendercallcode,
        name: sendername,
        infortext: infor.value,
        sendee: sendeecallcode,
        yornsend: 'right',
        sendtime: Date.now(),
      };
      // 向vuex中储存消息
      Store.commit('SENDADDINFOR', inforobj);

      // 清空输入框的消息
      infor.value = '';
    }

    return {
      infor,
      sendinfor,
      yornsend,
    };
  },
};
</script>

<style scoped>
    .sendinfor{
        position: fixed;
        bottom: 60px;
        display: flex;
        width: 100%;
        padding: 5px;
        background-color: #ececec;
    }
    .sendinfor input{
        flex:6;
        height: 30px;
        border:none;
        border-radius: 50px;
        margin: 0px 5px 0px 0px;
    }
    .sendinfor button{
        flex: 1;
        background-color: #0078d7;
        border-radius: 5px;
        font-size: 15px;
        color: #000000;
    }
</style>
